<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

    <title>添加评价</title>
</head>

<body class="body-gray">

<div th:replace="m/head :: body('banner.hidden', 'head-no-menu', '添加评价')"></div>


<!-- 主体内容 -->
<div class="see-evaluate-content">
    <!-- 上部订单 -->
    <form th:action="@{/evaluate/add}" method="post">
        <input type="hidden" name="target" th:value="${order.id}">
        <div class="see-evaluate-works">
            <div class="top clearfix">
                <div class="left">
                    订单编号：[[${order.no}]]
                </div>
                <div class="right" id="current-date"></div>
            </div>

            <!-- 如果是同款, 显示同款作品信息 -->
            <div class="middle" th:if="${order.type eq 1}">
                <div class="left-img">
                    <img th:src="${#request.getAttribute('staticServer') + order.orderDetail.sameStyle.spriteUrl}"/>
                </div>
                <div class="right-text">
                    <h3>作品名称：[[${order.orderDetail.sameStyle.name}]]</h3>
                    <p>基本简介：[[${order.orderDetail.sameStyle.description}]]</p>
                </div>
            </div>
            <div class="bottom">
                <div class="evaluate">
                    <span>作品符合度</span>
                    <div class="star">
                        <i class="iconfont icon-iconfontxingxing"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <span style="color: rgb(160,160,160);">5.0</span>
                    <input type="hidden" name="productionConformity.score"/>
                </div>
                <div class="evaluate">
                    <span>总体满意度</span>
                    <div class="star">
                        <i class="iconfont icon-iconfontxingxing"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <span style="color: rgb(160,160,160);">5.0</span>
                    <input type="hidden" name="satisficing.score"/>
                </div>
            </div>
        </div>

        <!-- 导演 -->
        <div class="see-evaluate-box" th:if="${order.orderDetail.photoGrapherUser ne null}">
            <div class="top">
                <div class="left-img">
                    <img th:if="${order.orderDetail.photoGrapherUser.portrait eq null}" th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                    <img th:if="${order.orderDetail.photoGrapherUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + order.orderDetail.photoGrapherUser.portrait}">
                </div>
                <div class="right-text">
                    <h3 th:text="${order.orderDetail.photoGrapherUser.nickname}"></h3>
                    <div class="star">
                        <i class="iconfont icon-iconfontxingxing"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <span>1.0</span>
                    <input type="hidden" name="photoGrapher.score"/>
                </div>
            </div>
            <div class="middle" id="photo_grapher_tags">

                <input type="hidden" name="photoGrapher.tags"/>
            </div>
            <div class="bottom">
                <textarea class="pingjia-con" name="photoGrapher.comment" rows="" cols="" placeholder="整体评价（最多300个字）"></textarea>
            </div>
        </div>

        <!-- 编剧 -->
        <div class="see-evaluate-box" th:if="${order.orderDetail.photoGrapherUser ne null}">
            <div class="top">
                <div class="left-img">
                    <img th:if="${order.orderDetail.photoGrapherUser.portrait eq null}" th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                    <img th:if="${order.orderDetail.photoGrapherUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + order.orderDetail.scriptWriterUser.portrait}">
                </div>
                <div class="right-text">
                    <h3 th:text="${order.orderDetail.photoGrapherUser.nickname}"></h3>
                    <div class="star">
                        <i class="iconfont icon-iconfontxingxing"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <span>1.0</span>
                    <input type="hidden" name="scriptWriter.score"/>
                </div>
            </div>
            <div class="middle" id="script_writer_tags">

                <input type="hidden" name="scriptWriter.tags"/>
            </div>
            <div class="bottom">
                <textarea class="pingjia-con" name="scriptWriter.comment" rows="" cols="" placeholder="整体评价（最多300个字）"></textarea>
            </div>
        </div>

        <!-- 客服 -->
        <div class="see-evaluate-box">
            <div class="top">
                <div class="left-img">
                    <img th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">

                </div>
                <div class="right-text">
                    <h3>客服</h3>
                    <div class="star">
                        <i class="iconfont icon-iconfontxingxing"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <span>1.0</span>
                    <input type="hidden" name="scriptWriter.score"/>
                </div>
            </div>
            <div class="middle" id="customer_service_tags">

                <input type="hidden" name="scriptWriter.tags"/>
            </div>
            <div class="bottom">
                <textarea class="pingjia-con" name="customerService.comment" rows="" cols="" placeholder="整体评价（最多300个字）"></textarea>
            </div>
        </div>

        <!-- 作品 -->
        <div class="see-evaluate-box">
            <div class="top">
                <div class="left-img" th:if="${order.type eq 1}">
                    <img th:src="${#request.getAttribute('staticServer') + order.orderDetail.sameStyle.spriteUrl}"/>
                </div>
                <div class="right-text">
                    <h3 th:text="${order.type eq 1 ? order.orderDetail.sameStyle.name : '私人定制'}"></h3>
                    <div class="star">
                        <i class="iconfont icon-iconfontxingxing"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <span>1.0</span>
                    <input type="hidden" name="scriptWriter.score"/>
                </div>
            </div>
            <div class="middle" id="production_tags">

                <input type="hidden" name="scriptWriter.tags"/>
            </div>
            <div class="bottom">
                <textarea class="pingjia-con" name="scriptWriter.comment" rows="" cols="" placeholder="整体评价（最多300个字）"></textarea>
            </div>
        </div>

        <div class="bottom-tj clearfix">
            <div class="left">
                <input type="hidden" name="anonymous">
                <span class="checkBox" id="anonymous-checkbox">
                    <i class="iconfont icon-icon_duihao-xian"></i>
                </span>
                <p>匿名评价</p>
            </div>
            <div class="right">
                <input type="submit" id="submit-btn" value="发表"/>
            </div>
        </div>
    </form>
</div>


<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>

<script>
    $(function () {
        $('#current-date').text(new Date().Format('yyyy-MM-dd hh:mm:ss'));

        $('.icon-star, .icon-iconfontxingxing').click(function () {
            $(this).siblings('i').removeClass('icon-iconfontxingxing').addClass('icon-star');
            $(this).prevAll('i').removeClass('icon-star').addClass('icon-iconfontxingxing');
            $(this).removeClass('icon-star').addClass('icon-iconfontxingxing');
            $(this).parent().siblings('span:last').text(($(this).prevAll('i').length + 1) + '.0');
            $(this).parent().siblings('input:last').val($(this).prevAll('i').length + 1);
        })


        // 加载字典数据
        $.ajax({
            type: 'get',
            url: '/dict/api/list/evaluate-photo-grapher-tags',
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                    for (var i in result.data) {
                        $('#photo_grapher_tags').append('<a href="javascript:void(0)" class="m-a evaluate-tag" data-item-value="' + result.data[i].value + '">' + result.data[i].name + '</a>');
                    }
                    eventCount++;
                }
            }
        })

        $.ajax({
            type: 'get',
            url: '/dict/api/list/evaluate-script-writer-tags',
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                    for (var i in result.data) {
                        $('#script_writer_tags').append('<a href="javascript:void(0)" class="m-a evaluate-tag" data-item-value="' + result.data[i].value + '">' + result.data[i].name + '</a>');
                    }
                    eventCount++;
                }
            }
        })

        $.ajax({
            type: 'get',
            url: '/dict/api/list/evaluate-customer-service-tags',
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                    for (var i in result.data) {
                        $('#customer_service_tags').append('<a href="javascript:void(0)" class="m-a evaluate-tag" data-item-value="' + result.data[i].value + '">' + result.data[i].name + '</a>');
                    }
                    eventCount++;
                }
            }
        })

        $.ajax({
            type: 'get',
            url: '/dict/api/list/evaluate-production-tags',
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                    for (var i in result.data) {
                        $('#production_tags').append('<a href="javascript:void(0)" class="m-a evaluate-tag" data-item-value="' + result.data[i].value + '">' + result.data[i].name + '</a>');
                    }
                    eventCount++;
                }
            }
        })



        var eventCount = 0;


        var bindTagEvent = setInterval(function () {
            if (eventCount == 4) {
                clearInterval(bindTagEvent);
                var value = '';
                $('.evaluate-tag').click(function () {
                    if ($(this).hasClass('on')) {
                        $(this).removeClass('on');
                    } else {
                        value = $(this).attr('data-item-value');
                        $(this).addClass('on');
                    }
                    if ($(this).siblings('a.on').length > 0) {
                        $(this).siblings('a.on').each(function() {
                            value += (',' + $(this).attr('data-item-value'));
                            $(this).val();
                        })
                        $(this).siblings('input').val(value);
                    } else {
                        $(this).siblings('input').val('');
                    }
                })
            }
        }, 200);

        $('#anonymous-checkbox').click(function () {
            if ($(this).hasClass('on')) {
                $('input[name="anonymous"]').val(true);
            } else {
                $('input[name="anonymous"]').val(false);
            }
        })
    })
</script>
</html>